<form class="layui-form seller-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2">手机号码：</label>
            <div class="layui-input-inline">
                <input type="text" id="mobile" name="mobile" lay-verify="title" placeholder="请输入手机号码" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label seller-inline-2" >时间范围：</label>
            <div class="layui-input-inline" >
                <input  type="text" name="date" value="" id="date" placeholder="请输入起止时间" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm"   val="" lay-submit lay-filter="*"><i class="iconfont icon-chaxun"></i>确定</button>

            <button class="layui-btn layui-btn-primary layui-btn-sm"  val="1" lay-submit lay-filter="*">今日</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm"  val="2" lay-submit lay-filter="*">昨日</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm"  val="3" lay-submit lay-filter="*">本周</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm"  val="4" lay-submit lay-filter="*">上周</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm"  val="5" lay-submit lay-filter="*">本月</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm"  val="6" lay-submit lay-filter="*">上月</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm"  val="7" lay-submit lay-filter="*">7日内</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm"  val="8" lay-submit lay-filter="*">一月内</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm"  val="9" lay-submit lay-filter="*">三月内</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm"  val="10" lay-submit lay-filter="*">半年内</button>
            <button class="layui-btn layui-btn-primary layui-btn-sm"  val="11" lay-submit lay-filter="*">一年内</button>
        </div>
    </div>

</form>

<div class="table-body">
    <table id="table" lay-filter="table"></table>
</div>
<script type="text/javascript">
    layui.use(['element','laydate','form','table'], function(){
        var element = layui.element; 
        var preDate = layui.util.toDateString(new Date(), "yyyy-MM-dd");
        //时间插件
        layui.laydate.render({
            elem: '#date',
            range: '到',
            type: 'date',
            max: preDate,
            value: "{:date('Y-m-d')} 到 {:date('Y-m-d')}"
        });

        layui.form.on('submit(*)', function(data){
            type = data.elem.getAttribute('val');
            if(type != ""){
                if(type == 1 || type == 2) {
                    $('#section').val(1);
                } else {
                    $('#section').val(2);
                }

                getTime(type,function(){
                    user_balance();
                });
            }else{
                if($('#date').val() == '') {
                    layer.msg('【时间范围】不能为空', {time: 1300});
                    return false;
                }
                $('#section').val(2);
                user_balance();
            }
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        layui.table.render({
                id: 'table'
                ,elem: '#table'
                ,title: '用户支出汇总表'
                ,toolbar: true
                ,totalRow: true
                ,page: false //开启分页
                ,limit:'1000'
                ,cols: [[ //表头
                    {field: 'mobile', title: '手机号码', totalRowText: '合计'}
                    ,{field: 'nickname', title: '昵称'}
                    ,{field: 'balance', title: '余额', totalRow: true, sort: true}
                    ,{field: 'bindingbalance', title: '赠送余额', totalRow: true, sort: true}
                    ,{field: 'pay_num', title: '笔数', totalRow: true, sort: true}
                    ,{field: 'pay_val', title: '金额', totalRow: true, sort: true}
                ]]
            });

        //取值
        function user_balance(){
            // 循环100毫秒等待
            var now = new Date();
            var exitTime = now.getTime() + 100;
            while (true) {
                now = new Date();
                if (now.getTime() > exitTime) {
                    if($('#date').val() != '') {
                        break;
                    }
                    exitTime = now.getTime() + 100;
                }
            }
            
            var data = {
                mobile: $('#mobile').val(),
                date: $('#date').val(),
                section:$('#section').val()
            };
            JsPost("", data, function(res){ 
                if(res.status){
                    //刷新table
                    layui.table.reload('table',{
                        data: res.data
                    }); 
                }else{
                    layer.msg(res.msg);
                }
            });
        }
        //解析时间按钮
        function getTime(type,calback){
            var data = {
                date_type:type
            };
            JsPost('{:url("getDateType")}', data, function(res){
                if(res.status){
                    //设置时间，回调
                    $('#date').val(res.data.start  + " 到 " + res.data.end);
                    calback();
                }else{
                    layer.msg(res.msg);
                }
            })
        }

        user_balance();
    });

</script>